<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!-- link to the last version of babylon -->
    <script src="babylon.2.2.js"></script>
    <script src="hand-1.3.7.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css" media="all">
    <script>
      window.addEventListener('DOMContentLoaded', function() {
        var canvas = document.getElementById('renderCanvas');
        var engine = new BABYLON.Engine(canvas, true);
        var createScene = function() {


          var scene = new BABYLON.Scene(engine);
           var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
           var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
           camera.attachControl(canvas, true);
           //Creation of spheres
           var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 100, 50, scene);

           //Positioning the meshes
           sphere1.position.x = -40;

           var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
           sphere1.material = materialSphere1;
           materialSphere1.alpha = 0.5;

           //materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);
           materialSphere1.diffuseTexture = new BABYLON.Texture("a.png", scene);
           //materialSphere1.diffuseTexture.hasAlpha = true;
           materialSphere1.emissiveColor = new BABYLON.Color3(1, .2, .7);
          // materialSphere1.wireframe = true;

          // return the created scene
          return scene;
          }

          var scene = createScene();

          engine.runRenderLoop(function() {
              scene.render();
          });

          window.addEventListener('resize', function() {
              engine.resize();
          });

      });



    </script>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>
